<template>
	<view class="container">
		<!-- <view class="page-header">
			<u-icon name="arrow-left" size="20" @click="goBack" class="back-icon"></u-icon>
			<text class="header-title">账号设置</text>
		</view> -->
		
		<view class="content-box">
			<u--form labelPosition="left" ref="uForm">
				<view class="avatar-item" @click="chooseAvatar">
					<text class="item-label">头像</text>
					<view class="right-content">
						<u-avatar :src="avatarUrl" size="80" class="avatar"></u-avatar>
						<u-icon name="arrow-right" color="#CCCCCC" size="18"></u-icon>
					</view>
				</view>
				
				<view class="form-item" @click="editNickname">
					<text class="item-label">昵称</text>
					<view class="right-content">
						<text class="item-value">{{ nickname || '未设置' }}</text>
						<u-icon name="arrow-right" color="#CCCCCC" size="18"></u-icon>
					</view>
				</view>
				
				<view class="form-item" @click="goToVerify">
					<text class="item-label">实名认证</text>
					<view class="right-content">
						<text class="item-value">{{ nickname || '未认证' }}</text>
						<u-icon name="arrow-right" color="#CCCCCC" size="18"></u-icon>
					</view>
				</view>
				
				<view class="form-item" @click="setPayPassword">
					<text class="item-label">支付密码</text>
					<view class="right-content">
						<text class="item-value">{{ hasPayPassword ? '已设置' : '去设置' }}</text>
						<u-icon name="arrow-right" color="#CCCCCC" size="18" @click.stop="goToModifyPayPassword"></u-icon>
					</view>
				</view>
				
				<view class="form-item" @click="goToAddress">
					<text class="item-label">收货地址</text>
					<view class="right-content">
						<text class="item-value">{{ hasAddress ? '已添加' : '去添加' }}</text>
						<u-icon name="arrow-right" color="#CCCCCC" size="18"></u-icon>
					</view>
				</view>
			</u--form>
			
			<view class="button-wrapper">
				<button class="logout-btn" @click="logout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js'
	
	export default {
		data() {
			return {
				avatarUrl: "http://121.36.197.175:19000/test/logo.png",
				baseUrl: "http://121.36.197.175:19000/test/",
				userInfo: null,
				nickname: null,
				hasPayPassword: false,
				hasAddress: false
			};
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 编辑昵称
			editNickname() {
				uni.navigateTo({
					url: '/pages/my/editNickname'
				});
			},
			
			// 前往实名认证
			goToVerify() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			},
			
			// 设置支付密码
			setPayPassword() {
				uni.navigateTo({
					url: '/pages/my/setPayPassword'
				});
			},
			
			// 前往地址管理
			goToAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			
			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 上传图片到服务器
						this.uploadAvatar(tempFilePath);
					}
				});
			},
			// 上传头像
			uploadAvatar(filePath) {
				uni.showLoading({
					title: '上传中...'
				});
				
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.userId) {
					uni.hideLoading();
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				uni.uploadFile({
					url: '/user-service/user/uploadAvatar',
					filePath: filePath,
					name: 'file',
					formData: {
						userId: userInfo.userId
					},
					header: {
						'token': uni.getStorageSync('token') || ''
					},
					success: (uploadRes) => {
						uni.hideLoading();
						const data = JSON.parse(uploadRes.data);
						if (data.code === 200) {
							// 获取上传后的文件名
							const fileName = data.data.avatarUrl;
							// 更新头像显示
							this.avatarUrl = this.baseUrl + fileName;
							// 更新用户信息
							userInfo.avatar = fileName;
							uni.setStorageSync('userInfo', userInfo);
							
							uni.showToast({
								title: '头像更新成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: data.message || '上传失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败: ' + (err.errMsg || '未知错误'),
							icon: 'none'
						});
					}
				});
			},
			// 获取用户头像
			async getUserAvatar() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (!userInfo || !userInfo.userId) {
						return;
					}
					
					const res = await request({
						url: '/user-service/user/avatar',
						method: 'GET',
						data: {
							userId: userInfo.userId
						}
					});
					
					if (res.code === 200 && res.data.avatarUrl) {
						// 拼接完整的头像URL
						this.avatarUrl = this.baseUrl + res.data.avatarUrl;
						// 更新本地存储
						userInfo.avatar = res.data.avatarUrl;
						uni.setStorageSync('userInfo', userInfo);
					}
				} catch (error) {
					console.error('获取头像失败', error);
				}
			},
			// 退出登录
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除用户信息
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							
							// 跳转到登录页
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			},
			// 检查是否已设置支付密码
			async checkPayPassword() {
				try {
					if (!this.userInfo || !this.userInfo.userId) return;
					
					const res = await request({
						url: '/user-service/user/checkPayPassword',
						method: 'GET',
						data: {
							userId: this.userInfo.userId
						}
					});
					
					if (res.code === 200) {
						this.hasPayPassword = res.data.hasPayPassword;
					}
				} catch (error) {
					console.error('检查支付密码状态失败', error);
				}
			},
			// 检查用户是否有地址
			async checkAddress() {
				try {
					if (!this.userInfo || !this.userInfo.userId) return;
					
					const res = await request({
						url: '/user-service/user/checkAddress',
						method: 'GET',
						data: {
							userId: this.userInfo.userId
						}
					});
					
					if (res.code === 200) {
						this.hasAddress = res.data.hasAddress;
					}
				} catch (error) {
					console.error('检查地址状态失败', error);
				}
			},
			// 前往支付密码修改界面
			goToModifyPayPassword() {
				uni.navigateTo({
					url: '/pages/my/setPayPassword'
				});
			}
		},
		onShow() {
			// 页面显示时获取最新的用户信息
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.userInfo && this.userInfo.avatar) {
				this.avatarUrl = this.baseUrl + this.userInfo.avatar;
			} else {
				// 如果本地没有头像信息，则从服务器获取
				this.getUserAvatar();
			}
			// 从本地存储获取昵称
			this.nickname = this.userInfo?.userName || null;
			
			// 检查是否设置支付密码
			this.checkPayPassword();
			
			// 检查是否有地址
			this.checkAddress();
		}
	};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.page-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90rpx;
	background-color: #ffffff;
	padding: 0 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-icon {
	position: absolute;
	left: 30rpx;
}

.header-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.content-box {
	padding: 30rpx 0;
}

.avatar-item, .form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #ffffff;
	margin-bottom: 2rpx;
}

.avatar-item {
	padding: 20rpx 30rpx;
}

.item-label {
	font-size: 30rpx;
	color: #333;
	font-weight: 400;
}

.right-content {
	display: flex;
	align-items: center;
}

.avatar {
	margin-right: 15rpx;
	border: 2rpx solid #eee;
}

.item-value {
	font-size: 28rpx;
	color: #999;
	margin-right: 15rpx;
}

.button-wrapper {
	margin-top: 60rpx;
	padding: 0 30rpx;
}

.logout-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background-color: #4CAF50;
	color: #ffffff;
	font-size: 32rpx;
	border-radius: 45rpx;
	border: none;
}

:deep(.u-avatar) {
	width: 130rpx !important;
	height: 130rpx !important;
	border-radius: 50% !important;
}
</style>
